<template>
	<custom-condition-filter-layout @reset="onReset" @submit="onSubmit">
		<custom-filter-layout-item label="工单属性">

			<custom-select-tag multiple v-model="queryData.attributeList" :options="attributeList"></custom-select-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="处理状态">
			<custom-dic-select-tag v-model="queryData.currStateList" multiple
				:dic-key="DIC_KEY.obs_fault_state"></custom-dic-select-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="接单方式">
			<custom-dic-select-tag v-model="queryData.receiveWayList" multiple
				:dic-key="DIC_KEY.obs_receive_way"></custom-dic-select-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="紧急程度">
			<custom-dic-select-tag v-model="queryData.degreeList" multiple
				:dic-key="DIC_KEY.obs_fault_degree"></custom-dic-select-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="影响范围">
			<custom-dic-select-tag v-model="queryData.rangeTypeList" multiple
				:dic-key="DIC_KEY.obs_fault_range"></custom-dic-select-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="工单来源">
			<custom-dic-select-tag v-model="queryData.sourceList" multiple
				:dic-key="DIC_KEY.obs_fault_source"></custom-dic-select-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="报修时间">
			<custom-date-range @change="changeDateRange" :startTime="queryData.repairStartTime"
				:endTime="queryData.repairEndTime"></custom-date-range>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="报修科室" showFilterButton @filter="onFilterDept">
			<fui-tag v-for="(item,index) in labelDepts" :key="index" :text="item.label" class="tag" theme="light">
				<view class="fui-close__icon" @click="delDeptTag(index)">
					<fui-icon name="close" color="#0052D9" :size="32"></fui-icon>
				</view>
			</fui-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="处理科室" showFilterButton @filter="onFilterDep">
			<fui-tag v-for="(item,index) in labelDept" :text="item.label" class="tag" :key="index" theme="light">
				<view class="fui-close__icon" @click="delDeptTeamUserTag(index)">
					<fui-icon name="close" color="#0052D9" :size="32"></fui-icon>
				</view>
			</fui-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="处理小组" showFilterButton @filter="onFilterTeam">
			<fui-tag v-for="(item,index) in labelTeam" :text="item.label" class="tag" :key="index" theme="light">
				<view class="fui-close__icon" @click="delHandleTeam(index)">
					<fui-icon name="close" color="#0052D9" :size="32"></fui-icon>
				</view>
			</fui-tag>
		</custom-filter-layout-item>
		<custom-filter-layout-item label="处理人" showFilterButton @filter="onFilterUser">
			<fui-tag v-for="(item,index) in labelUser" :text="item.name" class="tag" :key="index" theme="light">
				<view class="fui-close__icon" @click="delUserTag(index)">
					<fui-icon name="close" color="#0052D9" :size="32"></fui-icon>
				</view>
			</fui-tag>
		</custom-filter-layout-item>
	</custom-condition-filter-layout>
</template>

<script>
	import {
		DIC_KEY
	} from '../../config/dicKey-config.js'
	import {
		FormDeptStoreKey,
		FormTeamStoreKey,
		FormUserStoreKey
	} from '../../store/sotreKey.js'
	import {
		DeptSelectChoseType,
		toDeptSelectPage,
		toTeamSelectPage,
		toUserSelectPage
	} from '../../utils/util.js'
	import {
		mapWritableState,
		mapState,
		mapActions
	} from 'pinia'
	import {
		useWorkOrderSearh
	} from '../../store/modules/worderSerach.js'
	import {
		useDeptStore
	} from '../../store/modules/dept.js'
	import _ from 'lodash'
	import {
		keyDept,
		keyTeam,
		keyUser
	} from '../../utils/handleDeptData.js'
	import {
		SubPages
	} from '../../config/router-config.js'
	import {
		useTeamStore
	} from '../../store/modules/team.js'
	import {
		useSelectUserPageStore
	} from '../../store/modules/selectUserPage.js'
	export default {
		data() {
			return {
				DIC_KEY,
				attributeList: [{
					value: 1,
					text: '我报修的'
				}, {
					value: 2,
					text: '我处理的'
				}, {
					value: 3,
					text: '他人工单'
				}, {
					value: 4,
					text: '我科室报修的'
				}]
			}
		},

		computed: {
			...mapWritableState(useWorkOrderSearh, ['queryData']),
			...mapState(useDeptStore, ['deptStoreKey']),
			...mapState(useTeamStore, ['teamStoreKey']),
			...mapState(useSelectUserPageStore, ['userStoreKey']),

			labelDepts() {
				const {
					value,
				} = this.deptStoreKey[FormDeptStoreKey.WorkOrderSearchDept.key]
				if (value.length) {

					const v = _.map(value, item => JSON.parse(item))
					this.queryData.deptIdList = _.map(v, 'value')
					return v
				}
				return []

			},
			labelDept() {
				const {
					value,
				} = this.deptStoreKey[FormDeptStoreKey.WorkOrderSearhDeptTeamUser.key]
				if (value.length) {
					const v = _.map(value, item => JSON.parse(item))
					this.queryData.makeDeptIdList = _.map(v, 'value')
					return v
				}
				return []
			},
			labelTeam() {
				const {
					value,
				} = this.teamStoreKey[FormTeamStoreKey.WorkOrderSearhTeam.key]
				const v = _.map(value, item => JSON.parse(item))
				this.queryData.makeTeamIdList = _.map(v, 'value')

				return v
			},
			labelUser() {
				const {
					value
				} = this.userStoreKey[FormUserStoreKey.WorkOrderSearhUser.key]
				if (value.length) {
					const v = _.map(value, item => JSON.parse(item))
					this.queryData.makeUserIdList = _.map(v, 'value')

					return v
				}
				return []
			}
		},
		methods: {
			...mapActions(useDeptStore, ['delValue', 'clearDeptStoreKeyValue']),
			...mapActions(useTeamStore, ['delTeamStoreKeyValue', 'clearTeamStoreKeyValue']),
			...mapActions(useSelectUserPageStore, ['delUserStoreKeyValue', 'clearUserStoreKeyValue']),
			delDeptTag(index) {
				this.delValue(index, FormDeptStoreKey.WorkOrderSearchDept.key)
			},
			delDeptTeamUserTag(index) {
				this.delValue(index, FormDeptStoreKey.WorkOrderSearhDeptTeamUser.key)
			},
			delHandleTeam(index) {
				this.delTeamStoreKeyValue(index, FormTeamStoreKey.WorkOrderSearhTeam.key)
			},
			delUserTag(index) {
				this.delUserStoreKeyValue(index, FormUserStoreKey.WorkOrderSearhUser.key)
			},
			// 报修科室
			onFilterDept() {
				toDeptSelectPage(FormDeptStoreKey.WorkOrderSearchDept.key, DeptSelectChoseType.selectDept)
			},
			// 处理科室
			onFilterDep() {
				toDeptSelectPage(FormDeptStoreKey.WorkOrderSearhDeptTeamUser.key, DeptSelectChoseType.selectDept)

			},
			// 处理科室
			onFilterTeam() {
				toTeamSelectPage(FormTeamStoreKey.WorkOrderSearhTeam.key)
			},
			// 处理人
			onFilterUser() {
				toUserSelectPage(FormUserStoreKey.WorkOrderSearhUser.key, true)
			},
			changeDateRange(date) {
				this.queryData.repairStartTime = date[0]
				this.queryData.repairEndTime = date[1]

			},
			onReset() {
				this.clearDeptStoreKeyValue(FormDeptStoreKey.WorkOrderSearchDept.key)
				this.clearDeptStoreKeyValue(FormDeptStoreKey.WorkOrderSearhDeptTeamUser.key)
				this.clearTeamStoreKeyValue(FormTeamStoreKey.WorkOrderSearhTeam.key)
				this.clearUserStoreKeyValue(FormUserStoreKey.WorkOrderSearhUser.key)
				useWorkOrderSearh().$reset()

			},
			onSubmit() {
				uni.navigateTo({
					url: SubPages.WORK_ORDER_SEARCH.router
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-close__icon {
		display: flex;
		align-items: center;
		padding: 6rpx 0 4rpx 24rpx;
	}

	.tag {
		margin-right: 16rpx !important;
		margin-bottom: 16rpx !important;
	}
</style>